import React from "react";
import "./index.scss";

class Comment extends React.Component {
  state = {
    comments: [],
    commentsLoaded: false
  }

  componentDidMount () {
    this.fetchComments();
  }

  fetchComments = () => {
    this.props.api.then(
      res => {
        let { code, data } = res.data;
        if (code !== 0) return;
        this.props.dataRestructure && (data = this.props.dataRestructure(data));
        this.setState({ comments: data, commentsLoaded: true });
      }
    );
  };

  render() {
    let { onCommentContainerClick, thumbCount } = this.props;
    let { comments, commentsLoaded } = this.state;
    let commentAmount = comments.length;

    return (
      <React.Fragment>
        <div className="comment-inputer" onClick={onCommentContainerClick}><span>{thumbCount}</span></div>
        <div className="comments">
            <h2 className="comments-hd">
              讨论区<small>{commentAmount ? `(${commentAmount})` : ""}</small>
            </h2>
            <div className="comments-bd">
              {commentsLoaded &&
                !commentAmount &&
                "讨论区空空如也~ 快来留下你的看法吧!"}
              {comments.map((comment, index) => (
                <div
                  className="comment"
                  key={index}
                  onClick={onCommentContainerClick}
                >
                  <div className="comment-avatar">
                    <img src={comment.root.headimageurl} />
                  </div>
                  <div className="comment-content">
                    <div className="comment-meta">
                      <div className="comment-meta-name">
                        {comment.root.nickname}
                      </div>
                      <div className="comment-meta-date">
                        {comment.root.addtime}
                      </div>
                    </div>
                    <div className="comment-para">{comment.root.content}</div>
                    {comment.children && (
                      <div className="comment-reply">
                        {comment.children &&
                          comment.children.map((reply, index) => (
                            <div className="comment-reply-item" key={index}>
                              <span className="highlight">
                                {reply.nickname}
                                {reply.re_nickname ? "" : "："}
                              </span>
                              {reply.re_nickname && (
                                <React.Fragment>
                                  回复
                                  <span className="highlight">
                                    {reply.re_nickname}：
                                  </span>
                                </React.Fragment>
                              )}
                              {reply.content}
                            </div>
                          ))}
                        {comment.children && (
                          <div className="comment-more highlight">
                            共{comment.children.length}条回复>
                          </div>
                        )}
                      </div>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>
      </React.Fragment>
    );
  }
}

export default Comment;
